<template>
  <div>

    用户名： <input type="text" v-model="userObj.userName"/> <br>
    密码： <input type="password" v-model="userObj.pwd"/> <br>

    <input type="button" value="登陆" @click="land()"> <br>
    <input type="button" value="确定" @click="ok()"> <br>

    <hr/>
    单价：{{ price }} <br>
    数量 <input type="number" v-model="num"> <br>
    总价：{{ price * num }}
    <hr/>
    年龄： <input type="text" v-model="age">
    {{ age >= 18 ? "成年" : "小孩" }}

    <hr/>
    性别：<input type="radio" value="男" v-model="sex">男
    <input type="radio" value="女" v-model="sex">女 <br>
    {{ sex }}
    <hr/>
    下拉框：<br>
    <select v-model="edu">
      <option value="gz">高中</option>
      <option value="dz">大专</option>
      <option value="bk">本科</option>
    </select>
    <br>
    {{ edu }}
    <input type="button" value="本科" @click="changeItem()">
    <hr/>
    复选框：<br>
    <input type="checkbox" v-model="likeArray" value="体育">体育
    <input type="checkbox" v-model="likeArray" value="美术">美术
    <input type="checkbox" v-model="likeArray" value="音乐">音乐
    <input type="checkbox" v-model="likeArray" value="游戏">游戏
    <input type="checkbox" v-model="likeArray" value="上网">上网 <br>
    {{ likeArray }}

    <hr/>
    工资：<input type="text" ref="money"> <br>
    <input type="button" value="获取值" @click="showValue()">
    <hr/>
    成绩：{{ grade }}<br>
    是否合格：<span v-if="grade>=60">合格</span>
    <span v-else>不合格</span> <br>
    等级：
    <span v-if="grade>=90">优秀</span>
    <span v-else-if="grade>=80">良好</span>
    <span v-else-if="grade>=60">中等</span>
    <span v-else>差</span> <hr/>

    <table border="1" cellspacing="0" width="80%">
      <thead>
      <tr>
        <th>序号</th>
        <th>编号</th>
        <th>姓名</th>
        <th>工资</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(em,index) in emList"  :key="em.id">
        <td>{{index}}</td>
        <td>{{em.id}}</td>
        <td>{{em.name}}</td>
        <td>{{em.money}}</td>
        <td>{{em.status}}</td>
        <td><input type="button" v-if="em.status=='在职'" value="离职"></td>
      </tr>
      </tbody>
    </table>





    <hr/>
    <input type="button" value="改变样式" @click="changeImg()"> <br>
    <div>
      <img :src="imgPath" :style="imgCss">

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userObj: {},
      imgCss: {width: '300px', height: '300px'},
      imgPath: require("./img/1.jpg"),
      price: 30,
      num: 1,
      age: null,
      sex: "男",
      edu: "",
      likeArray: [],
      grade: 90,
      emList:[
        {id:1,name:"王弄墨",money:8000,status:"在职"},
        {id:2,name:"王嘉尔",money:1200,status:"离职"},
        {id:3,name:"王德发",money:1800,status:"在职"},
        {id:4,name:"迪丽热巴",money:1700,status:"离职"},
      ]
    }
  },
  methods: {
    land() {
      if (this.userObj.userName == "java" && this.userObj.pwd === "123") {
        //经路由跳转首页
       // this.$router.push("/index")
        //经路由跳转首页，并传递参数
        //name 表示注册路由的名称 ， params 描述传递参数
        this.$router.push({name:"Index",params:{id:2,name:"tom"}});



        //清空文本框内容
        this.userObj.pwd = "";
        this.userObj.userName = "";
      } else {
        alert("登陆失败")
        this.userObj = {}
      }
    },
    ok() {
      alert("ok")
    },
    changeImg() {
      this.imgCss.width = '100px';
      this.imgCss.height = '100px';
    },
    changeItem() {
      this.edu = "bk";
    },
    showValue() {
      alert(this.$refs.money.value)
      this.$refs.money.style.color = "red";
    }
  }
}
</script>

<style scoped>

</style>